<template>
  <div class="counter">
    计数：<button @click="handleMinus">-</button> {{ count }} <button @click="handleAdd">+</button>
    <br>
    <input type="text" v-model="$store.state.userInfo.username">
  </div>
</template>

<script>
export default {
  name: 'Counter',
  created () {
    // 创建后执行
    console.log(this.$store)
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    handleAdd () {
      console.log('加')
      // 在 Store 中的 mutation 方法不能直接调用，
      // 是需要使用 store.commit() 来提交 mutation
      this.$store.commit('increment', { num: 5 })
    },
    handleMinus () {
      this.$store.commit('decrement')
    }
  }
}
</script>

<style lang="scss">

</style>
